<template>
  <!-- 抄表率统计 -->
  <div class="firm">
    <!-- 搜索框-->
    <div style="padding: 0px 0px;">
      <div style="font-weight:700;padding:10px 10px 10px 50px;">抄表率统计</div>
      <div style="border-top:1px solid #E6E6E6;margin:0px 20px;"></div>
        <!-- style="margin:20px 0px" -->
      <searchComponents
        :key="searchKey"
        :searchData="searchData"
        :optionsZi="optionsZi"
        :searchOptionTable="searchOptionTable"
        @searchCallBack="searchCallBack"
      ></searchComponents>
      <!-- @clearSearch='clearSearch' -->
      <div style="border-top:1px solid #E6E6E6;"></div>
      <div class="right_row" style="padding: 25px 30px;">
        <!-- <el-button type="primary" size="mini" @click="sunS_F" plain>搜索</el-button> -->
        <!--添加和批量删除组件-->
        <buttonhurdle
          class="buttonhurdle"
          :diaDataAdd="searchData"
          :optionsZi="optionsZi"
          :searchOptionTable="searchOptionTable"
          @toAdd="toAdd"
          @toDelete="toDelete"
        ></buttonhurdle>
        <importXlsx
          class="importX"
          :importUrl='importUrl'
          :submitUpload='submitUpload'
        />
        <rightButtons
          style="float:right;padding:10px;"
          @sunS_F='sunS_F'
          @emptySearch='emptySearch'
          @configuration='configuration'
        ></rightButtons>
      </div>
    </div>
    <div class="out">
      <!-- <dictionaries :searchData='searchData' @optionData="dictionariesCallBack"></dictionaries> -->
      <dictionaries :searchData='searchData' :modelType='modelType' @optionData="dictionariesCallBack"></dictionaries>
      <!-- {{optionsZi}} -->
      <!--数据列表-->
      <el-table
        ref="multipleTable"
        :data="dataAttribute"
        v-loading.body="false"
        border
        fit
        highlight-current-row
        size="mini"
        :cell-style="{padding:'5px 0'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="55"></el-table-column>
        <el-table-column
          align="center"
          v-for="item in searchData"
          v-if="item.tableSign"
          :key="item.id"
          :label="item.CN"
          :show-overflow-tooltip="true"
        >
          <!-- <template slot-scope="scope">{{item.type === 'select' ? optionData(optionsZi[item.EN],scope.row[item.EN]):scope.row[item.EN]}}</template> -->
          <template slot-scope="scope">{{item.type === 'select' ? optionDatas(item.typeGroupCode?optionsZi[item.EN]:searchOptionTable[item.EN],scope.row[item.EN]):scope.row[item.EN]}}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="280px" fixed="right">
          <template slot-scope="scope" class="do">
            <!-- 查看按钮 -->
            <el-button
              style="color:#0B9AC3;border:none;"
              icon="el-icon-view"
              circle
              @click="makeExaId(scope.row.id)"
            ></el-button>
            <!-- 修改组件 -->
            <modificationi
              class="inline_block"
              :attributeOrder="searchData"
              :optionsZi="optionsZi"
              :searchOptionTable="searchOptionTable"
              :modData="scope.row"
              @modifyData="modifyData"
            ></modificationi>
            <!-- 删除按钮 -->
            <el-button
              style="color:#C90010;border:none;"
              icon="el-icon-delete"
              circle
              @click="deleteList(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagetotal"
      ></el-pagination>
    </div>
    <twoSum></twoSum>
    <!-- 查看组件 -->
    <examine
      :DialogVisibleMod="DialogVisibleExamine"
      :modData="examineData"
      :optionsZi="optionsZi"
      :searchOptionTable="searchOptionTable"
      :attributeOrder="searchData"
      @examineDialog="examineDialog"
    ></examine>
  </div>
</template>
<script>
  //引入组件
  import {
    SearchCForL,
    searchComponents,
    buttonhurdle,
    modificationi,
    examine,
    rightButtons,
    dictionaries,
    importXlsx
  } from "@/views/components/FLPage";
  //引入组件
  import twoSum from "@/views/components/FLPage";
  import {
    addFlFactory, //增加
    deleteFlFactory, //删除
    searchFlFactory, //分页查询
    modifyFlFactory, //修改
    getFlFactory, //根据ID获取
    exprotXls, //导出Xlsx
    downTem //导出下载模板
  } from "@/api/admin/flStatisticsOfMeter/index";
  // import { exprotXls,downTem } from '@/api/new20191221/exportXlsx'

  export default {
    components: {
      SearchCForL,
      searchComponents,
      buttonhurdle,
      modificationi,
      examine,
      rightButtons,
      dictionaries,
      importXlsx,
      twoSum
    },
    data() {
      return {
        //搜索框
        suoS: {},
        //瀑布数据
        //   搜索组件的数据
        searchData: [
            {
              EN: "id",
              CN: "主键",
              value: "",
              type: "input",
              option: [],
              Exp: "^.{3,20}$",
              err: "·长度为3-20的所有字符!",
              result: true,
              sign: true,
              searchSign: false,
              addSign: false,
              tableSign: false,
              examineSign: false,
              examineDisabled: false,
              modificationSign: false,
              // 字典分组编码
              // typeGroupCode:'',
              // 控件字段名字
              // field:''
            },
            {
              EN: "name",
              CN: "厂商名称",
              value: "",
              type: "input",
              option: [],
              Exp: "^.{3,20}$",
              err: "·长度为3-20的所有字符!",
              result: true,
              sign: true,
              searchSign: true,
              addSign: true,
              tableSign: true,
              examineSign: true,
              examineDisabled: false,
              modificationSign: true
            },
            {
              EN: "code",
              CN: "厂商代码",
              value: "",
              type: "input",
              option: [],
              Exp: "^.{3,20}$",
              err: "·长度为3-20的所有字符!",
              result: true,
              sign: true,
              searchSign: true,
              addSign: true,
              tableSign: true,
              examineSign: true,
              examineDisabled: false,
              modificationSign: true
            },
            {
              EN: "address",
              CN: "办公地址",
              value: "",
              type: "input",
              option: [],
              Exp: "^.{3,20}$",
              err: "·长度为3-20的所有字符!",
              result: true,
              sign: true,
              searchSign: true,
              addSign: true,
              tableSign: true,
              examineSign: true,
              examineDisabled: false,
              modificationSign: true
            },
            {
              EN: "tel",
              CN: "办公电话",
              value: "",
              type: "input",
              option: [],
              Exp: "^.{3,20}$",
              err: "·长度为3-20的所有字符!",
              result: true,
              sign: true,
              searchSign: true,
              addSign: true,
              tableSign: true,
              examineSign: true,
              examineDisabled: false,
              modificationSign: true
            },
            {
              EN: "contact",
              CN: "联系人",
              value: "",
              type: "input",
              option: [],
              Exp: "^.{3,20}$",
              err: "·长度为3-20的所有字符!",
              result: true,
              sign: true,
              searchSign: true,
              addSign: true,
              tableSign: true,
              examineSign: true,
              examineDisabled: false,
              modificationSign: true
            },
            {
              EN: "deviceType",
              CN: "设备类型",
              value: "",
              type: "select",
              option: [
                {label:"水表", value:"1"},
                {label:"集中器", value:"2"}
              ],
              Exp: "^.{3,20}$",
              err: "·长度为3-20的所有字符!",
              result: true,
              sign: true,
              searchSign: true,
              addSign: true,
              tableSign: true,
              examineSign: true,
              examineDisabled: false,
              modificationSign: true,
              typeGroupCode:'sblx'
            },
            {
              EN: "status",
              CN: "状态",
              value: "",
              type: "select",
              option: [
                {label:"启用", value:"1"},
                {label:"停用", value:"0"}
              ],
              Exp: "^.{3,20}$",
              err: "·长度为3-20的所有字符!",
              result: true,
              sign: true,
              searchSign: true,
              addSign: true,
              tableSign: true,
              examineSign: true,
              examineDisabled: false,
              modificationSign: true,
              typeGroupCode:'statusDct'
            },
            {
              EN: "note",
              CN: "备注",
              value: "",
              type: "input",
              option: [],
              Exp: "",
              err: "·长度为3-20的所有字符!",
              result: true,
              sign: true,
              searchSign: true,
              addSign: true,
              tableSign: true,
              examineSign: true,
              examineDisabled: false,
              modificationSign: true
            },
        ],
        //添加弹窗的数据模型
        diaDataAdd: {
          yyqName: "",
          pqName: "",
          pqNum: "",
          BH: ""
        },
        //删除----Start----------------------------------------
        deleteDataList: [],
        //删除----End----------------------------------------

        //查看----Start----------------------------------------
        //查看的弹窗控制器
        DialogVisibleExamine: false,
        //查看的数据
        examineData: {},
        //查看----End----------------------------------------

        //表格数据
        //后端传来的数据
        dataAttribute: [],
        //表格选中
        multipleSelection: [],
        //分页
        currentPage: 1, //当前页
        pagesize: 10, //每页条数
        pagetotal: 0, //总条数
        // xlsx导入的请求地址
        importUrl:`/api/cb/flFactory/importXls`,
        modelType:'table',
        optionsZi:[],
        searchOptionTable:[],
        searchKey:0
      };
    },
    computed: {
      // optionData(){
      //   return function (obj, index) {
      //     // obj ---  optionsZi[item.EN],
      //     // index --- scope.row[item.EN]
      //     console.log(this.optionsZi,obj,'fenglanlan');
      //     obj.findindex((va,inde) =>{
      //       return va.value == index
      //     })

      //     console.log(obj,'fenglanlan');

      //     // console.log(obj,index,obj[index].label,'sssss222ss')
      //     return obj[index].label
      //   }
      // }
      optionDatas(){
        return function (arr,val) {
          //console.log(arr[val],'why');
          if(arr){
            //console.log(arr[val], val)
          }
            if (arr) {
              for (let i = 0; i < arr.length; i++) {
              if(arr[i].value === val){
                // console.log(arr[i].label)
              return arr[i].label
              }
            }
          }
        }
      },
    },
    created() {
      this.forData(this.currentPage, this.pagesize, this.suoS);
    },
    methods: {
      // 配置
      configuration(msg){
        if (msg == '配置') {
          console.log(msg);
        }
      },
    // 重置
    emptySearch(msg){     
      if (msg == '重置') {
        let suoS = this.suoS
        console.log(this.suoS,855555);
        
        for (const key in this.suoS) {
          if (this.suoS.hasOwnProperty(key)) {
            this.suoS[key] = ""
          }
        }
        console.log(this.searchData,966666);  
        for (let i = 0; i < this.searchData.length; i++) {
          this.searchData[i].value = ""
        }
        console.log(this.suoS,'kankanjiguo');
        console.log(this.searchData,'searchData');
        this.searchKey = this.searchKey + 1
        
        // this.forData(this.currentPage, this.pagesize);
        this.forData(this.currentPage, this.pagesize, this.suoS);
      }
    },
      // 字典组件回调
      dictionariesCallBack([a={}, b={}]){
        // 正常字典
        this.optionsZi = a
        // 跨表字典
        this.searchOptionTable = b
        console.log(a,b,66688);

        // console.log(options, 111)
        // console.log(options,'huilaide');
        // this.optionsZi = options
            this.forData(this.currentPage, this.pagesize, this.suoS);
         // }
      },
      // 导入更新列表
      submitUpload(res){
        console.log(res);

      },
      //搜索
      sunS_F() {
        this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
      },
      //查询组件回调
      searchCallBack(newData) {
        console.log(newData);
        //组装数据（newData是个数组）

        let obj={};
        for(let i=0;i<newData.length;i++){
          obj[newData[i].EN]=newData[i].value;
        }
        console.log(obj)
        this.suoS=obj
      },
      //渲染数据初始
      forData(page, size, searchData) {
        searchFlFactory(page, size, searchData).then(response => {
          console.log(response+'zhegeshi');
          this.pagetotal = response.data.total;
          this.dataAttribute = response.data.list;
        });
      },

      //添加用户--新增表单组件传来的参数
      toAdd(addData) {
        console.log(addData);
        let obj = {};
        for (let i = 0; i < addData.length; i++) {
          obj[addData[i].EN] = addData[i].value;
        }
        console.log(obj);
        addFlFactory(obj).then(response => {
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
        });
      },

      //按钮栏传递了删除命令
      toDelete(orderstring) {
        this.$confirm("确认删除？")
        .then(() => {
          let idArr = [];
          for (let i = 0; i < this.deleteDataList.length; i++) {
            idArr.push(this.deleteDataList[i].id);
          }
          if (idArr.length == 0) {
            // alert("请选择要删除的数据！");
            this.$message({
              message:'请选择要删除的数据！',
              type:'warning'
            })
            return;
          }
          deleteFlFactory(idArr)
          .then(response => {
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          })
          .catch(error => {});
          this.$message({
            message:'删除成功！',
            type:'success'
          })
        })
        .catch(()=> {
          this.$message.error('删除失败')
        });
      },

      //单项删除
      deleteList(id) {
        console.log(id);
        let arrId = [id];
        this.$confirm("确认删除？")
        .then(_ => {
          deleteFlFactory(arrId).then(response => {
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
            this.$message({
              message:'已删除',
              type:'success'
            })
          });
          // done();
        })
        .catch(() => {
          this.$message({
              message:'已取消删除',
              type:'warning'
            })
          // this.$message.error('删除失败')
        });
      },

      //查看
      makeExaId(id) {
        getFlFactory(id)
        .then(response => {
          let copyDialog = true;
          this.DialogVisibleExamine = copyDialog;
          // console.log(response)
          this.examineData = response.data;
        })
        .catch(error => {
          this.$message.error('获取失败')
        });
      },
      //查看关闭弹窗
      examineDialog(dialogVisibleMod) {
        this.DialogVisibleExamine = false;
      },

      //修改
      modifyData(value, modData) {
        console.log(value,modData)

        if (value === true) {
          modifyFlFactory(modData.id, modData)
          .then(response => {
            console.log(response);
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          })
          .catch(error => {
            this.$message.error('修改失败')
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          });
        } else {
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
        }
      },

      //表格选中事件
      handleSelectionChange(val) {
        this.multipleSelection = val;
        //传递删除的参数
        this.deleteDataList = val;
      },

      //分页
      handleSizeChange(val) {
        console.log("每页 " + val + " 条");
        this.forData(this.currentPage, val, this.suoS);
      },
      handleCurrentChange(val) {
        console.log("当前页: " + val);
        this.forData(val, this.pagesize, this.suoS);
      },
      // 下载模板请求
      exprotXlsx: exprotXls,
      downloadFile: downTem
      //工具栏组件传来的参数
      // FTableFunction() {
      //   this.attributeOrder = attributeOrderCloneTwiceL;
      // },
    }
  };
</script>
<style scoped src="@/styles/allCss.css"></style>
<style lang="scss" scoped>
.firm{
  /deep/ .el-table--mini{
    .gutter{
      display: table-cell!important;
    }
  }
  .right_row{
    display: flex;
    // justify-content: start;
    align-items: center;
    position: relative;
    .buttons{
      position: absolute;
      right: 10px;
    }
  }
  .do{
    display: flex;
  }
  .pagination{
    text-align: left;
    margin-top: 15px;
  }
}
</style>
